<template>
	<view>
		<u-loading-page :loading="loadingShow" bgColor="#ffffff94;" loadingColor="#a4b0be;" color="#a4b0be;"
			loadingText="加载中...." fontSize="30rpx"></u-loading-page>
		<view>
			<u-toast ref="uToast" show="true" />
		</view>
		<view>
			<!-- 搜索条件 -->
			<u-sticky>
				<view class="search">
					<view style="padding: 20rpx;width: 410rpx;">
						<u-calendar :show="dateShow" mode="range" @confirm="changeDate" @close="closeDate" showLunar
							:maxDate="maxDate" :minDate="minDate" monthNum="12">
						</u-calendar>
						<u-button @click="dateShow = true" shape="circle" plain type="info" :text="dateHint"
							icon="calendar">
						</u-button>
					</view>
				</view>
			</u-sticky>
		</view>

		<!-- 表格 -->
		<view class="tableBox">
			<uni-table emptyText="暂无更多数据" border="true" :loading="loading">
				<uni-tr>
					<uni-th align="center">土地名称</uni-th>
					<uni-th align="center">区域名称</uni-th>
					<uni-th align="center" width="130rpx">状态</uni-th>
					<uni-th align="center">创建时间</uni-th>
					<uni-th align="center" width="700rpx">操作</uni-th>
				</uni-tr>
				<uni-tr v-for="(item,index) in list">
					<uni-td align="center">{{item.plotName}}</uni-td>
					<uni-td align="center">{{item.name}}</uni-td>
					<uni-td align="center">
						<rich-text v-html="getStatus(item.status)"></rich-text>
					</uni-td>
					<uni-td align="center">{{getTime(item.createTime)}}</uni-td>
					<uni-td align="center">
						<view style="display: flex;">
							<view style="margin-right: 20rpx;width: 140rpx;" v-if="item.status==0">
								<u-button type="error" text="出租该区域" @click="goPage(item.id,1)" size="small"></u-button>
							</view>
							<view style="margin-right: 20rpx;width: 140rpx;" v-if="item.status==1">
								<u-button type="primary" text="取消出租" @click="goPage(item.id,1)" size="small"></u-button>
							</view>
							<view style="margin-right: 20rpx;width: 190rpx;">
								<u-button type="success" text="查看所属的土地" @click="goPage(item.plotId,2)" size="small">
								</u-button>
							</view>
							<view style="margin-right: 20rpx;width: 160rpx;">
								<u-button type="warning" text="修改区域信息" @click="goPage(item,3)" size="small">
								</u-button>
							</view>
							<view style="width: 120rpx;">
								<u-button type="info" text="删除" @click="goPage(item.id,4)" size="small"></u-button>
							</view>
						</view>
					</uni-td>
				</uni-tr>
			</uni-table>
		</view>
		<!--悬浮按钮-->
		<uni-fab ref="fab" :pattern="fab.pattern" :content="fab.content" :horizontal="fab.horizontal"
			:vertical="fab.vertical" :direction="fab.direction" @trigger="fab.trigger" />

		<!-- 添加修改区域 -->
		<u-modal :show="modalShow" :title="modalTtile" showCancelButton @confirm="addOrUpdate" @cancel="cleanFrom">
			<view class="slot-content">
				<u--form labelPosition="left" :model="regionFrom" :rules="rules" ref="regionRef">
					<u-form-item label="长度" prop="lon" required>
						<u-input placeholder="请输入该区域长度" border="bottom" clearable v-model="regionFrom.lon" type="digit">
							<u--text text="米" slot="suffix" margin="0 3px 0 0" type="tips"></u--text>
						</u-input>
					</u-form-item>
					<u-form-item label="宽度" prop="wide" required>
						<u-input placeholder="请输入该区域宽度" border="bottom" clearable v-model="regionFrom.wide"
							type="digit">
							<u--text text="米" slot="suffix" margin="0 3px 0 0" type="tips"></u--text>
						</u-input>
					</u-form-item>
					<u-form-item label="区域名称" prop="name" required>
						<u-input placeholder="请输入区域名称" border="bottom" clearable v-model="regionFrom.name">
						</u-input>
					</u-form-item>
					<u-form-item label="备注" prop="remark">
						<u-input placeholder="备注,选填" border="bottom" clearable v-model="regionFrom.remark">
						</u-input>
					</u-form-item>
				</u--form>
			</view>
		</u-modal>

		<!-- 删除确认模态框 -->
		<u-modal :show="removeShow" title="确认删除" :content='removeContent' showCancelButton @cancel="removeShow=false"
			@confirm="removeRegion"></u-modal>
		<!-- 分页 -->
		<view>
			<page-pagination :total="params.total" :pageSize="params.pageSize" :showAround="true" :btnText="true"
				:forceEllipses="true" @change="getList"></page-pagination>
		</view>
	</view>
</template>

<script>
	import SOtime from '@/js_sdk/fl-SOtime/SOtime.js'
	export default {
		data() {
			return {
				loadingShow:false,
				removeId: "",
				removeShow: false,
				removeContent: "此操作将删除该区域，如果有出租或该区域有产品则会删除失败, 是否继续?",
				modalShow: false,
				modalTtile: "",
				regionFrom: {
					handleType: 1 //1:添加 2:修改
				},
				list: [],
				loading: true,
				token: "",
				dateShow: false,
				show: false,
				params: {
					//总记录数
					total: 0,
					//每页多少条	
					pageSize: 10,
					orderNum: "",
					status: "",
					startTime: "",
					endTime: ""
				},
				statusHint: "订单状态筛选",
				dateHint: "日期范围筛选",
				dateList: [],
				maxDate: "",
				minDate: "",
				fab: {
					title: 'uni-fab',
					directionStr: '垂直',
					horizontal: 'right',
					vertical: 'top',
					direction: 'horizontal',
					pattern: {
						color: '#7bb5f9',
						backgroundColor: '#fc080800',
						selectedColor: '#5a92f9',
						buttonColor: '#3994ff8a',
						iconColor: '#fff'
					},
					is_color_type: false,
					content: [{
						iconPath: 'https://s1.chu0.com/src/img/png/03/03d5b786444844a5a424c143dba43b32.png?imageMogr2/auto-orient/thumbnail/!234x234r/gravity/Center/crop/234x234/quality/85/&e=1735488000&token=1srnZGLKZ0Aqlz6dk7yF4SkiYf4eP-YrEOdM1sob:e32FjXBL3nT7cRQXCcdByMM5-MQ=',
						selectedIconPath: 'https://s1.aigei.com/src/img/png/39/3977b149ad9f4565ab630d98f33a98b7.png?imageMogr2/auto-orient/thumbnail/!234x234r/gravity/Center/crop/234x234/quality/85/&e=1735488000&token=P7S2Xpzfz11vAkASLTkfHN7Fw-oOZBecqeJaxypL:6xu3wgiuYq2BGyMxHYN1nHA2c_M=',
						text: '添加区域',
						active: false,
					}, ],
					trigger(v) {
						if (v.index === 0) {
							this.regionFrom.handleType = 1
							this.modalTtile = "添加区域"
							this.modalShow = true
						}
					}
				},
				rules: {
					'lon': {
						type: "number",
						required: true,
						message: '请输入区域正确的长度',
						trigger: ['blur', "change"]
					},
					'wide': {
						type: "number",
						required: true,
						message: '请输入区域正确的宽度',
						trigger: ['blur', "change"]
					},
					'name': {
						type: "string",
						required: true,
						message: '请输入区域名称',
						trigger: ['blur', "change"]
					}
				}
			}
		},
		onLoad() {
			this.contentType = this.$reqConfig.CONTENTTYPE + ";+charset=UTF-8"
			this.token = uni.getStorageSync("merchantsToken").token
			this.defaultDate()
			this.search()
		},
		methods: {
			addOrUpdate() {
				this.$refs.regionRef.validate().then(res => {
					this.$axios({
						url: "/merchant/merchantPlotRegion/addOrUpdate",
						method: "post",
						data: {
							...this.regionFrom
						},
						header: {
							"Authorization": this.token,
							"Content-type": this.contentType,
							"type": "merchantsToken"
						},
					}).then((res) => {
						if (res.code == 0) {
							this.cleanFrom()
							this.$refs.uToast.show({
								message: "保存成功",
								type: "success"
							})
							this.search()
						}
					})
				}).catch(errors => {
					uni.showToast({
						icon: 'none',
						title: "信息未完善"
					})
				})
			},
			openUpdateModal(item) {
				//避免浅拷贝
				this.regionFrom = JSON.parse(JSON.stringify(item))
				delete(this.regionFrom.createTime)
				delete(this.regionFrom.updateTime)
				this.modalShow = true
			},
			cleanFrom() {
				this.modalShow = false
				this.regionFrom = {}
			},
			removeRegion(id) {
				this.$axios({
					url: "/merchant/merchantPlotRegion/delete",
					method: "post",
					data: {
						id: this.removeId
					},
					header: {
						"Authorization": this.token,
						"Content-type": this.contentType,
						"type": "merchantsToken"
					},
				}).then((res) => {
					if (res.code == 0) {
						this.removeShow = false
						this.$refs.uToast.show({
							message: "删除成功",
							type: "success"
						})
						this.search()
					}
				})
			},
			updateStatus(id) {
				this.$axios({
					url: "/merchant/merchantPlotRegion/updateStatus",
					method: "post",
					data: {
						id: id
					},
					header: {
						"Authorization": this.token,
						"Content-type": this.contentType,
						"type": "merchantsToken"
					},
				}).then((res) => {
					if (res.code == 0) {
						this.$refs.uToast.show({
							message: "操作成功",
							type: "success"
						})
						this.search()
					}
				})
			},
			getList(e) {
				if(e==1){
					this.loadingShow=true
				}
				this.loading = true
				this.$axios({
					url: "/merchant/merchantPlotRegion/regionList",
					method: "post",
					data: {
						pageNo: e,
						pageSize: this.params.pageSize,
						orderNum: this.params.orderNum,
						status: this.params.status,
						startTime: this.params.startTime,
						endTime: this.params.endTime
					},
					header: {
						"Authorization": this.token,
						"Content-type": this.contentType,
						"type": "merchantsToken"
					},
				}).then((res) => {
					//请求接口成功之后，判断加载状态，处理数据
					this.list = res.result.list
					this.params.total = res.result.total
					this.loading = false
					this.loadingShow=false
				})
			},
			search() {
				this.getList(1);
			},
			goPage(id, index) {
				switch (index) {
					case 1:
						this.updateStatus(id)
						break;
					case 2:
						uni.navigateTo({
							url: './plotDetail?id=' + id
						})
						break
					case 3:
						this.modalTtile = "修改区域信息"
						this.openUpdateModal(id)
						break;
					case 4:
						this.removeId = id						
						this.removeShow = true
						break;
				}
			},
			//设置默认最早时间和默认最晚时间
			defaultDate() {
				const d = new Date()
				const year = d.getFullYear()
				this.minDate = year + "-01-01"
				this.maxDate = year + "-12-31"
			},
			//选择日期
			changeDate(e) {
				this.dateHint = e[0] + "-" + e[e.length - 1]
				this.params.startTime = e[0] + " 00:00:00"
				this.params.endTime = e[e.length - 1] + " 23:59:59"
				this.dateShow = false
				this.search()
			},
			closeDate(e) {
				this.params.startTime = ""
				this.params.endTime = ""
				this.dateShow = false
				this.dateHint = "选择日期范围"
			},
			//选择订单状态
			changeStatus(e) {
				this.params.status = e.indexs
				if (e.indexs == 7) {
					this.params.status = -1
				}
				if (e.indexs == 8) {
					this.params.status = -2
				}
				if (e.indexs == 9) {
					this.params.status = ""
				}
				this.statusHint = this.columns[0][e.indexs]
				this.show = false
			},
			getStatus(status) {
				switch (status) {
					case 0:
						return "<font style='color: #6b6a70'>正常</font>"
					case 1:
						return "<font style='color: #409eff'>出租中</font>"
					case 2:
						return "<font style='color: #e1b919'>已被租</font>"
				}
			},
			getTime(time) {
				return SOtime.time3(time);
			}

		}
	}
</script>

<style lang="scss">
	page {
		background-color: #FFFFFF;
	}

	.uni-fab {
		z-index: 999 !important;
	}

	.uni-fab--rightTop {
		top: 14rpx !important;
	}

	.uni-fab__circle--rightTop {
		top: 14rpx !important;
	}

	.uni-fab__content--other-platform {
		z-index: 999 !important
	}

	.search {
		display: flex;

		.date {
			font-size: 25rpx;
			color: #c3c3c3;
		}
	}

	.tableBox {
		border-left: none;
		margin: 30rpx;
		border-style: solid;
		color: #2d2d2d0d;
		border-width: 5rpx;
		border-top: none;
		border-bottom: none;

		.uni-table-th {
			background-color: #f5f7fa;
			color: #909399;
		}

		.uni-table--loader {
			left: -250rpx;
			border: 9px solid #165eff;
		}
	}
</style>
